import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { DNavBar, DImagesupload, DAgree, DAtInpute } from '@/components'
import { AtForm, AtButton } from 'taro-ui'
import http from '@/api'
import sdk from '@/common/sdk'
import './userform.scss'

const peopleRight = require('../assets/people_right.png')
const peopleLeft = require('../assets/people_info.png')
export default class UserformBox extends Component {

    constructor(props) {
        super(props)
        this.state = {
            userformdata: {
                // name:'',
                // telphone:'',
                company: ''
            },
            listimg: [],
            peopleleft: [],
            peopleright: [],
            status: false,
            itemstatus: 0,
            myId: '',
            title: '员工认证',
            list1: [],
            list2: [],
            list3: [],
            isshow: true
        }
    }
    componentWillMount() {
        let { myId } = this.$router.params
        if (myId) {
            this.getUserDetail()
            this.setState({
                myId,
                itemstatus: 1,
                isshow: false
            })
        }
        let name = '', phone = ''
        if (localStorage.getItem('userInformation')) {
            let { infoMyEntity = '' } = JSON.parse(localStorage.getItem('userInformation'))
            name = infoMyEntity.imName
            phone = infoMyEntity.imPhone
        }
        this.setState({
            name,
            phone
        })
        sessionStorage.removeItem('companyList')
    }

    componentDidShow() {
        this.getCompanyInformation()
        sdk.setTitleInfo(this.state.title)
    }
    //重新提交数据回显
    getUserDetail() {
        http.userDetail().then(res => {
            let { list1, list2, list3 } = this.state
            res.fileList.map(item => {
                if (item.cfType === '1') {
                    list1.push({
                        id: item.cfFileId,
                        url: item.cfFileUrl
                    })
                } else if (item.cfType === '2') {
                    list2.push({
                        id: item.cfFileId,
                        url: item.cfFileUrl
                    })
                } else if (item.cfType === '3') {
                    list3.push({
                        id: item.cfFileId,
                        url: item.cfFileUrl
                    })
                }
            })
            this.onChangeImages(list1)
            this.onChangeImagesLeft(list2)
            this.onChangeImagesRight(list3)
            this.setState({
                userformdata: {
                    ...this.state.userformdata,
                    company: res.entName
                },
                list1,
                list2,
                list3,
                isshow: true
            })
        })
    }
    getCompanyInformation() {
        let _company = sessionStorage.getItem('companyList')
        let jsonList = JSON.parse(_company)
        if (!_company) {
            true
        }

        // this.bindCarform('company', JSON.parse(_company))
        this.setState({
            userformdata: {
                ...this.state.userformdata,
                ...jsonList
            }
        })
    }


    onHandleImage = () => {
        Taro.navigateTo({
            url: '/pages/itemImages/itemImages'
        })
    }
    bindCarform = (key, value) => {
        if (key) {
            this.setState({
                userformdata: Object.assign(this.state.userformdata, { [key]: value })
            })
        }
    }

    tipShowToast(title) {
        return Taro.showToast({
            title,
            icon: 'none'
        })
    }

    onChangeImages(list) {
        let _arr = []
        list.map(item => {
            _arr.push({
                cfFileId: item.id,
                cfFileName: "个人名片",
                cfFileUrl: item.url,
                cfType: "1"
            })
        })
        this.setState({
            listimg: _arr
        })
    }

    onChangeImagesLeft(list) {
        let _arr = []
        list.map(item => {
            _arr.push({
                cfFileId: item.id,
                cfFileName: "身份证正面",
                cfFileUrl: item.url,
                cfType: "2"
            })
        })
        this.setState({
            peopleleft: _arr
        })
    }

    onChangeImagesRight(list) {
        let _arr = []
        list.map(item => {
            _arr.push({
                cfFileId: item.id,
                cfFileName: "身份证反面",
                cfFileUrl: item.url,
                cfType: "3"
            })
        })
        this.setState({
            peopleright: _arr
        })
    }

    onHandleChange(status) {
        this.setState({
            status
        })
    }

    onRightHanlde() {
        Taro.navigateTo({
            url: "/pages/selectbusiness/selectbusiness"
        })
    }

    submitHandle = () => {
        const {
            userformdata,
            listimg,
            peopleleft,
            peopleright,
            status,
            myId
        } = this.state
        let _status = false
        Object.keys(userformdata).map(key => {
            if (!userformdata[key]) {
                _status = true
            }
        })
        if (_status) {
            return this.tipShowToast('请选择申请加入的企业')
        } else if (listimg.length === 0) {
            return this.tipShowToast('请上传个人名片！')
        } else if (peopleleft.length === 0) {
            return this.tipShowToast('请上传身份证正面照！')
        } else if (peopleright.length === 0) {
            return this.tipShowToast('请上传身份证反面照！')
        } else if (!status) {
            return this.tipShowToast('请阅读并同意《员工认证协议》！')
        }

        let _obj = {
            imName: userformdata.name,
            imPhone: userformdata.telphone,
            entName: userformdata.company,
            // imCardUrl: listimg,
            // imIdcardUrl: peopleleft,
            // imIdcardBakUrl: peopleright,
            fileList: [...listimg, ...peopleleft, ...peopleright],
            entAddr: userformdata.entAddr,
            entAtt: userformdata.entAtt,
            entDis: userformdata.entDis,
            entDisDetail: userformdata.entDisDetail,
            entId: userformdata.entId
        }
        if (myId) {
            _obj = {
                ..._obj,
                id: myId
            }
        }
        http.ApproEmployee(_obj)
            .then(() => {
                Taro.showToast({
                    title: '已提交员工认证!',
                    duration: 800,
                    mask: true
                }).then(() => {
                    setTimeout(() => {
                        Taro.redirectTo({
                            url: '/pages/information/information'
                        })
                    }, 1000);
                })
            })
    }
    render() {
        const {
            userformdata,
            itemstatus,
            myId,
            status,
            name,
            phone,
            title,
            list1,
            list2,
            list3,
            isshow
        } = this.state
        const _bindCarform = function (value) {
            this.bindCarform(arguments[arguments.length - 1].bind, value)
        }
        const itemImagesHtml1 =
            <View className='b_userform__images_enterpris'>
                <View className='item_title'>
                    <Text className='item_title__left'>个人名片</Text>
                    <Text className='item_title__dec'>(可上传其他证明身份的图片)</Text>
                </View>
                <DImagesupload count={1} value={list1} onChangeImages={this.onChangeImages.bind(this)}></DImagesupload>
            </View>
        const itemImagesHtml2 =
            <View className='b_userform__images_enterpris'>
                <View className='item_title'>
                    <Text className='item_title__left'>法人身份证</Text>
                </View>
                <View className="item_images__box">
                    <DImagesupload value={list2} onChangeImages={this.onChangeImagesLeft.bind(this)} className='item_images__box_item' count={1} bgImage={peopleRight} text={'正面(头像)'}></DImagesupload>
                    <DImagesupload value={list3} onChangeImages={this.onChangeImagesRight.bind(this)} count={1} bgImage={peopleLeft} text={'背面(国徽)'}></DImagesupload>
                </View>
            </View>
        return (
            <View className='b_userform'>
                <DNavBar title={title}></DNavBar>
                <View className='b_userform__box'>

                    <AtForm>
                        {
                            itemstatus === 1 && <View className="b_userform__tips">
                                <Text>您的申请审核未通过或您已撤回申请，请修改信息后重新提交申请</Text>
                            </View>
                        }
                        <View className='b_userform__form '>
                            <DAtInpute icon='none' value={name} title='个人姓名' require></DAtInpute>
                            <DAtInpute icon='none' value={phone} title='联系方式' require></DAtInpute>
                            <DAtInpute icon='chevron-right' onRightHanlde={this.onRightHanlde.bind(this)} onChange={_bindCarform.bind(this)} bind='company' value={userformdata.company} title='企业名称' placeholder='请选择申请加入的企业' require></DAtInpute>
                        </View>
                        <View className='b_userform__images'>
                            <View className='b_userform__images_title'>完成个人认证请提供如下资料照片</View>
                            {isshow && itemImagesHtml1}
                            {isshow && itemImagesHtml2}
                        </View>
                        <View className='b_userform__footer'>
                            <DAgree type='2' value={status} onHandleChange={this.onHandleChange.bind(this)} text={'《员工认证协议》'}></DAgree>
                            <AtButton className='item_btn' formType='submit' onClick={this.submitHandle.bind(this)}>{myId ? '重新提交' : '提交'}</AtButton>
                        </View>
                    </AtForm>
                </View>
            </View>
        )
    }
}